<template>
  <div class="transitionTest-root">
    <button @click="add">add</button>
    <div class="parent">
      <transition-group name="list-complete" tag="div">
        <div
          v-for="item in list"
          v-bind:key="item.label"
          class="item"
        >
          {{ item.label }}
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'

  export default {
    name: 'transitionTest',
    props: {},
    components: {},
    setup(props, content) {

      let {} = props

      const data = reactive({
        list: [],
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        nextNum: 10
      })

      const add = () => {
        data.list.unshift({ label: `${`${(data.list.length + 1)}`.repeat(3)}` })
      }

      const randomIndex = function() {
        return Math.floor(Math.random() * data.items.length)
      }
      // const add = function() {
      //   data.items.splice(randomIndex(), 0, data.nextNum++)
      // }
      const remove = function() {
        data.items.splice(randomIndex(), 1)
      }
      const shuffle = function() {
        data.items = JSON.parse(JSON.stringify(data.items))
      }

      return { ...toRefs(data), add, randomIndex, remove, shuffle }
    }
  }
</script>

<style scoped lang="scss">
  $full: 100%;
  .transitionTest-root {
    width: 100%;
    height: 100%;


    .parent {
      position: absolute;

      top: 20px;
      left: 300px;
      width: 300px;
      height: 500px;
      border: 2px solid deeppink;
      overflow: auto;

      .item {
        width: 280px;
        height: 80px;
        background: pink;
        color: black;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        padding: 5px;
        background-clip: content-box;

        transition: all 1s;
      }

      .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */
      {
        opacity: 0;
        transform: translateY(30px);
      }

      .list-complete-leave-active {
        position: absolute;
      }
    }
  }



</style>
